<template>
	<view class="content">
		<swiper class="imageContainer" @change="handleChange" next-margin="139rpx" circular >
			<block v-for="(item,index) in cardlist" :key="index">
				<swiper-item class="swiperitem">
					<view class="itemcontent"  :style="'background-image:url('+ item.charge_image+'); background-size: 100% 100%;'">
						<!-- <view :class="{'index_color':(index+1)%3==0}" class="cardname">{{item.charge_name}}</view>
						<view :class="{'index_color':(index+1)%3==0}" class="money"><text>￥{{item.charge_cion}}</text>起/年</view> -->
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="dots">
			<view class="item" :class="[swiperCurrent==index?'item_color':'']" v-for="(item,index) in cardlist" :key="index"></view>
		</view>
		<view class="title">
			会员权益
		</view>
		<view class="content_item" v-for="(item,index) in lists" :key="index">
			<view class="head">
				<i class="iconfont" :class="item.iconname"></i>
			</view>
			<view class="text">
				<view class="text_top">{{item.title}}</view>
				<view class="text_bottom">{{item.lable}}</view>
			</view>
		</view>

		<view @click="gotosubject" class="btn">立即享受权益</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [
					'../../static/image/V1.png',
					'../../static/image/V2.png',
					'../../static/image/V3.png',

				],
				cardlist:[],
				swiperCurrent: 0,
				lists: [{
						iconname: 'iconkemuxiangmu',
						'title':'微课',
						'lable':'部分直播课VIP会员免费看'
					},
					{
						iconname: 'iconkemuxiangmu',
						'title':'海量直播课程任你看',
						'lable':'部分直播课VIP会员免费看'
					},
					{
						iconname: 'iconkemu',
						'title':'智测你的水平',
						'lable':'贴合教材；同步海量习题；学习更全面'
					},
					{
						iconname: 'iconketang',
						'title':'同步练习 学习更轻松',
						'lable':'贴合教材；同步海量习题；学习更全面'
					},
					{
						iconname: 'iconbanji',
						'title':'趣练出你的精彩',
						'lable':'贴合教材；同步海量习题；学习更全面'
					},
					{
						iconname:'iconziliaotongbu',
						'title':'自评弥补你的短板',
						'lable':'贴合教材；同步海量习题；学习更全面'
					},
					// {
					// 	iconname:'iconxunlian',
					// 	'title':'微课',
					// 	'lable':'部分直播课VIP会员免费看'
					// },
					// {
					// 	iconname:'iconkaoshijilu',
					// 	'title':'微课',
					// 	'lable':'部分直播课VIP会员免费看'
					// }
				]
			};
		},
		onLoad() {
			this.$zapi.apiPost('user/charge.config/ListsType').then(res=>{
				var data=res.data;
				if(data.code==200){
					var cardlist=data.data.data;
					// cardlist.forEach((item,index)=>{
					// 	var id=index%3;
					// 	item['imageurl']=this.imgList[id];
						
					// });
					this.cardlist=cardlist;
					
				}else{
					
					
					
				}
			});
		},
		methods: {
			handleChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			gotosubject:function(){

				uni.navigateTo({
					url:'my-children?data='+encodeURIComponent(JSON.stringify(this.cardlist[this.swiperCurrent]))
				})
			}
		}

	}
</script>

<style lang="scss">
	
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.index_color{
		color: #FCE9B6 !important;
	}

	// 3D轮播样式
	.imageContainer {
		width: 100%;
		height: 325upx;
		margin-top: 30upx;
		background-color: #fff;
	}

	.swiperitem {
		/* height: 500rpx; */
		height: 318upx;
		padding-left: 30upx;
		box-sizing: border-box;
		position: relative;

	}

	.itemcontent {
		width: 100%;
		height: 318upx;
		.cardname{
			padding: 20upx;
			margin-left: 10upx;
			font-size:34upx;
			color: #4A4034;
		}
		.money{
			position: relative;
			top: 110upx;
			left: 30upx;
			font-size: 30upx;
			text{
				font-size: 50upx;
			}
		}
	}

	.dots {
		margin: auto;
		width: 92%;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.item {
			width: 38upx;
			height: 6upx;
			background: rgba(229, 229, 229, 1);
			margin-left: 20upx;
		}

		.item_color {
			background: #FF9900;
		}
	}

	.title {
		width: 92%;
		margin: auto;
		font-size: 34upx;
		color: #4A4034;
	}

	.content_item {
		width: 92%;
		margin: auto;
		margin-top: 40upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 84upx;
			color: #FF9900;
			width: 84upx;
			height: 84upx;
			border-radius: 50%;
			border: 1px solid #FF9900;
			margin-right: 32upx;

			i {
				font-size: 45upx;
			}
		}

		.text {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.text_top {
				font-size: 34upx;
				color: rgba(74, 64, 52, 1);
				line-height: 35upx;
			}

			.text_bottom {
				font-size: 26upx;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
	
	.btn{
		margin: 70upx auto;
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		font-size: 30upx;
		border-radius:8upx;
		background:#FF9900;
	}
</style>
